<template>
  <div>
     
   <div class="nav_list">
    <div class="nav_one">
      <div>柱状图</div>
      <div>zhu zhuang tu</div>
      <div class="icon">
        <i class="el-icon-edit"></i>
      </div>
    </div>
     <div class="nav_one">
      <div>柱状图</div>
      <div>zhu zhuang tu</div>
      <div class="icon">
        <i class="el-icon-edit"></i>
      </div>
    </div>
     <div class="nav_one">
      <div>柱状图</div>
      <div>zhu zhuang tu</div>
      <div class="icon">
        <i class="el-icon-edit"></i>
      </div>
    </div>
     <div class="nav_one">
      <div>柱状图</div>
      <div>zhu zhuang tu</div>
      <div class="icon">
        <i class="el-icon-edit"></i>
      </div>
    </div>
   </div>
    <div>
      <div class="bar">
        <tongji></tongji>
        <barChart></barChart>
        <div style="margin-top: 20px;">
          <lineChart></lineChart>
        </div>
        <div style="margin-top: 20px;">
          <pieChart></pieChart>
        </div>
        <div style="margin-top: 20px;">
          <barMany></barMany>
        </div>
      </div>  
    </div>

  </div>
</template>
<script>
import barChart from './charts/barCharts.vue'
import lineChart from './charts/lineChart.vue'
import pieChart from './charts/pieChart.vue'
import barMany from './charts/barMany.vue'
import tongji from './charts/tongji.vue'
export default {
      components:{barChart,lineChart,pieChart,barMany,tongji}

}
</script>  
<style lang="scss" scoped>
  .nav_list{
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: space-around;
    .nav_one{
      width: 250px;
      height: 250px;
      display: flex;
      flex-direction: column;
      font-size: 30px;
      text-align: center;
      color: white;
      justify-content: space-around;
      background: seagreen;
      margin-top:20px;
    }
  }
</style>